<template>
	<view>
		<!-- <u-navbar
      title="我的代办"
      @rightClick="rightClick"
      :autoBack="true"
    ></u-navbar> -->
		<view class="content">
			<view class="content_nav">
				<u-tabs
					:list="tabList"
					bgColor="#fff"
					:scrollable="true"
					@click="handleClick"
				></u-tabs>
			</view>
			<view>
				<view class="listBox" v-for="(item, index) in taskList" :key="item.id">
					<u-collapse :border="false" :value="[`${index + 1}`]">
						<u-collapse-item :name="index + 1">
							<view class="" slot="title">
								<text class="cusTitle">{{ item.name }}</text>
								<text class="u-page__item__title__slot-title colorBlue"
									>@微信</text
								>
							</view>
							<view>
								<view class="" v-if="item.session_archiving_status == 2"
									>未同意会话</view
								>
								<text class="listBox_msg"
									>【{{
										item.generate_type == 2
											? `${item.create_name + "指派"}`
											: item.generate_type == 1
											? "系统"
											: item.generate_type == 3
											? "提醒"
											: ""
									}}】【{{ item.title }}】</text
								>
								<view class="listBoxCot">
									<view class="listBoxCot_image" v-if="!!item.file_url">
										<u--image
											v-for="items in item.file_url"
											:key="items"
											:showLoading="true"
											:src="items"
											width="60px"
											height="60px"
											@click="showImage(items)"
											class="imagesData"
										></u--image>
									</view>
									<view class="listBoxCotFlex">
										<view class="listBoxCot_time">
											<text>截止：{{ item.start_time }}</text>
										</view>
										<view class="listBoxCot_btn">
											<view class="small_btn" @click="handleIgnore(item.id)">
												忽略
											</view>
											<!-- 
                        v-if="item.is_complete == 2"

                       -->
											<view class="small_btn" @click="handleFeedback(item)">
												反馈
											</view>
											<!-- 
                        v-if="item.is_complete == 1"
                       -->
											<view class="small_btn green" @tap="goChat(item)">
												发起聊天
											</view>
										</view>
									</view>
								</view>
							</view>
						</u-collapse-item>
					</u-collapse>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
import { sidebarTaskList, sidebarTaskIgnore } from "@/config/api";
import InitWx from "@/mixins/init-wx";
export default {
	mixins: [InitWx],
	data() {
		return {
			components: {},
			tabList: [
				{
					name: "今天待办",
				},
				{
					name: "过期待办",
				},
				{
					name: "未来7天",
				},
			],
			current: 1,
			totalPages: "",
			isLoadAll: false,
			paramsData: {
				page: 1,
				limit: 10,
			},
			taskList: [],
			hasMore: true,
			userId: null,
		};
	},
	onLoad(options) {
		this.userId = uni.getStorageSync("UserId");
		this.getTaskList();
		this.initSignature();
	},
	onShow() {},
	methods: {
		showImage(url) {
			uni.previewImage({
				current: 0,
				urls: [url],
				longPressActions: {
					// itemList: ['发送给朋友', '保存图片', '收藏'],
					success: function (data) {
						console.log(
							"选中了第" +
								(data.tapIndex + 1) +
								"个按钮,第" +
								(data.index + 1) +
								"张图片"
						);
					},

					fail: function (err) {
						console.log(err.errMsg);
					},
				},
			});
		},
		async getTaskList() {
			const res = await sidebarTaskList({
				type: this.current,
				worker_id: this.userId || uni.getStorageSync("UserId"),
				page: this.paramsData.page,
				limit: 10,
			});
			if (res.data.length < 10) {
				this.hasMore = false;
			}
			this.totalPages = res.data.total;
			this.taskList = [...this.taskList, ...res.data];
		},
		async handleIgnore(id) {
			const res = await sidebarTaskIgnore({ id });
			this.paramsData.page = 1;
			this.taskList = [];
			this.getTaskList();
			uni.showToast({
				title: "忽略成功!",
				duration: 2000,
			});
		},
		handleFeedback(item) {
			uni.navigateTo({
				url:
					"/pages/charge/index?id=" +
					item.id +
					"&name=" +
					item.name +
					"&create_id=" +
					item.create_id,
			});
		},
		handleClick(item) {
			this.current = item.index + 1;
			this.paramsData.page = 1;
			this.taskList = [];
			this.getTaskList();
		},
		onReachBottom() {
			if (!this.hasMore) {
				return;
			}
			this.paramsData.page++;
			this.getTaskList();
		},
		goChat(item) {
			let that = this;
			wx.openEnterpriseChat({
				// 注意：userIds和externalUserIds至少选填一个。内部群最多2000人；外部群最多500人；如果有微信联系人，最多40人
				userIds: that.userId, //参与会话的企业成员列表，格式为userid1;userid2;...，用分号隔开。
				externalUserIds: item.external_userid,
				groupName: "", // 会话名称。单聊时该参数传入空字符串""即可。
				// chatId: "CHATID", // 若要打开已有会话，需指定此参数。如果是新建会话，chatId必须为空串
				success: function (res) {
					var chatId = res.chatId; //返回当前群聊ID，仅当使用agentConfig注入该接口权限时才返回chatId
					// 回调
				},
				fail: function (res) {
					if (res.errMsg.indexOf("function not exist") > -1) {
						alert("版本过低请升级");
					}
				},
			});
		},
	},
};
</script>

<style lang="scss">
page {
	.content {
		.content_nav {
			padding: 0 20rpx;
			background: #fff;
		}
		.listBox {
			border-radius: 10rpx;
			padding: 0 20rpx;
			background: #fff;
			margin: 20rpx auto;
		}

		.gray {
			color: #ebedf0;
		}
		.green {
			color: #5ac725;
		}

		.colorBlue,
		.blue {
			color: #3c9cff;
		}
		.listBox_msg {
			color: #000;
			margin-bottom: 10px;
			display: block;
		}
		.listBoxCot {
			.listBoxCot_image {
				display: flex;
				flex-direction: row;
				// justify-content: space-between;
				margin-left: 20rpx;
				margin: 20rpx 0;
				flex-wrap: wrap;
				image {
					margin-bottom: 5px;
				}
			}
			.listBoxCotFlex {
				display: flex;
				flex-direction: row;
				align-items: center;
				justify-content: space-between;
			}

			.listBoxCot_btn {
				display: flex;
				flex-direction: row;
				align-items: center;
			}
			.small_btn {
				margin-left: 20rpx;
				padding: 3rpx 18rpx;
				border: 1px solid #eaecef;
				font-size: 15rpx;
				border-radius: 10rpx;
			}
		}
	}
}
.imagesData {
	margin-right: 20rpx;
	margin-bottom: 8px;
}
/deep/ .u-cell__title-text {
	font-size: 18px;
}

/deep/ .u-collapse-item__content__text {
	line-height: inherit;
	padding: 0rpx 30rpx;
	padding-bottom: 30rpx;
}
.cusTitle {
	font-size: 15px;
	margin-right: 8px;
}
</style>
